import React, { useRef, forwardRef } from "react";

const Child = forwardRef((props, ref) => {
  return <div ref={ref}>child子组件</div>;
});

// 1. useRef相当于createRef，可以用于获取dom节点

/*
  2. ref如果给类组件加，可以获取子组件的实例
    但是函数组件是没有实例的，所以不能直接获取到函数组件的子组件实例了

    但是可以配合forwardRef的高阶组件，来获取到子组件的dom节点
*/

const App = () => {
  const ipt = useRef();
  const child = useRef();

  const fn = () => {
    // console.log(ipt.current.value);
    console.log(child.current);
  };

  return (
    <>
      <h2>useRef</h2>
      <input type="text" ref={ipt} />
      <button onClick={fn}>btn</button>

      <hr />

      <Child ref={child} />
    </>
  );
};

export default App;
